<template>
    <div class="main-page">
        <div class="main-btn">
            <el-select v-model="value" placeholder="请选择" @change="selectChange">
                <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
                </el-option>
            </el-select>
            <!-- <el-button  type="primary" icon="el-icon-folder" style="text-align:right; margin-left: 65%;" v-if="!is_show_all_pdf" @click="showMonthPdf">查看当月报表</el-button>
            <el-button  type="warning" icon="el-icon-folder" style="text-align:right; margin-left: 65%;" v-if="is_show_all_pdf" @click="switch_pdf">查看所有月报表</el-button> -->
            <!-- <el-button  type="warning" icon="el-icon-folder" style="text-align:right; margin-left: 45%;" @click="switch_pdf">查看所有月报表</el-button> -->
            <el-button  type="warning" icon="el-icon-folder" style="text-align:right; margin-left: 39%; background: rgb(243, 105, 105);" @click="showInfoMonth">船闸信息系统月报表</el-button>
            <el-button  type="warning" icon="el-icon-folder" style="text-align:right;background: rgb(97, 209, 74);" @click="showLightMonth">光缆巡查月报表</el-button>
            <el-button  type="warning" icon="el-icon-folder" style="text-align:right; margin-left: 1%;background: rgb(74, 182, 209);" @click="switchShowModel">查看台账</el-button>
            <!-- <el-button  type="warning" icon="el-icon-folder-opened" v-if="!is_show_all" style="text-align:right; margin-left: 1%;" @click="switchShowModel">查看所有台账</el-button>
            <el-button  type="primary" icon="el-icon-folder" v-if="is_show_all" style="text-align:right; margin-left: 1%;" @click="switchShowModel">查看当月台账</el-button> -->
            <el-select v-model="value2" placeholder="请选择" @change="selectChange2" style=" margin-left: 1%;" v-if="pdfs_show==false">
                <el-option
                v-for="item in options2"
                :key="item.value"
                :label="item.label"
                :value="item.value">
                </el-option>
            </el-select>
        </div>
        <div class="main-page-list">

            <el-table :data="show_pdfs" style="width: 100%;" v-if="pdfs_show">
                <el-table-column prop="pdf_name" label="报表名" width="300">
                </el-table-column>
                <el-table-column prop="user_name" label="创建者"  width="200">
                </el-table-column>
                <el-table-column prop="date" label="创建日期"  width="200">
                </el-table-column>
                <el-table-column fixed="right" label="操作">
                    <template slot-scope="scope">
                        <!-- <el-button type="text" size="small">查看</el-button> -->
                        <el-button type="text" size="small" @click="showPdfBase64(scope.row.pdfbase64)">预览</el-button>
                        <el-button type="text" size="small" style="color: rgb(36, 212, 168);" @click="downloadFile(scope.row.pdf_name,scope.row.pdfbase64)">下载</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <el-table
            :data="show_list"
            style="width: 100%;"  v-if="!pdfs_show">
                <el-table-column prop="excel_name" label="台账名" width="300">
                </el-table-column>
                <el-table-column prop="author_name" label="创建者"  width="200">
                </el-table-column>
                <el-table-column prop="date" label="创建日期"  width="200">
                </el-table-column>
                <el-table-column fixed="right" label="操作">
                    <template slot-scope="scope">
                        <!-- <el-button type="text" size="small">查看</el-button> -->
                        <el-button type="text" size="small" @click="show(scope.row.excel_id)">查看</el-button>
                        <!-- <el-button type="text" size="small" style="color: rgb(228, 74, 74);"  @click="deleteExcel(scope.row.excel_id)">删除</el-button> -->
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <el-dialog title="月报表预览" :visible.sync="dialogPdfVisible">
        <div>
            <iframe :src="cur_show_base64" style="width: 800px; height: 800px;">
                <p>您的浏览器不支持  iframe 标签。</p>
            </iframe>
        </div>
    </el-dialog>
    </div>
  </template>
  
  <script>
import {showLoading,hideLoading} from '../components/loading.js'
    export default{
        data(){
            return {
                list:[],
                show_list:[],
                filtrated_list:[],
                user_name:"",
                user_id:"",
                is_show_all:false,
                cur_show_base64:"",
                base64:"",
                pdf_name:"",
                pdfs:[],
                pdfs_show:false,
                show_all_pdfs:false,
                dialogPdfVisible: false,
                is_show_all_pdf:false,
                show_pdfs:[],
                filtrated_pdfs:[],
                options: [{
                    value: '选项1',
                    label: '信息系统日常养护台账'
                    }, {
                    value: '选项2',
                    label: '机电日常养护台账'
                    }, {
                    value: '选项3',
                    label: '土建日常养护台账'
                    }, {
                    value: '选项4',
                    label: '养护工程报表'
                    }],
                value: '选项1',
                options2: [{
                    value: '故障处理记录表',
                    label: '故障处理记录表'
                    }, {
                    value: 'UPS电源检查保养记录表',
                    label: 'UPS电源检查保养记录表'
                    },
                    {
                    value: '备品备件领用使用表',
                    label: '备品备件领用使用表'
                    },
                    {
                    value: '监控设备检查保养记录表',
                    label: '监控设备检查保养记录表'
                    },
                    {
                    value: '视频会议系统检查保养记录表',
                    label: '视频会议系统检查保养记录表'
                    },
                    {
                    value: '信息化设备设施情况表',
                    label: '信息化设备设施情况表'
                    },
                    {
                    value: '信息系统设备基本情况表',
                    label: '信息系统设备基本情况表'
                    }
                ],
                value2: '故障处理记录表'
            }
        },
        async mounted(){
            this.user_name=this.$route.query.user_name;
            // this.user_name=this.$store.state.user_info.user_name
            this.user_id=this.$route.query.user_id;
            if(!this.user_id){
                this.$router.push({path:'/login'})
            }else{
                await this.showMonthPdf()
                await this.getExcelList(this.user_id);
            }
            
        },
        //监听函数
        watch: {
            '$route' () {
                this.user_name=this.$route.query.user_name;
            // this.user_name=this.$store.state.user_info.user_name
                this.user_id=this.$route.query.user_id;
                this.getExcelList(this.user_id);
            }
        },
        activated() {
        },
        methods:{
            switchShowModel(){
                this.pdfs_show=false
                this.flitExcelByValue(this.value2)
            // if(this.is_show_all==false){
            //     this.is_show_all=true
            //     this.show_list=this.list
            // }else{
            //     this.is_show_all=false
            //     this.show_list=this.filtrated_list
            // }
          },
          selectChange(e){
            if(e!="选项1"){
                this.show_pdfs=[]
                this.show_list=[]
            }else{
                this.getExcelList(this.user_id)
            }
          },
          selectChange2(e){
            console.log(e)
            this.flitExcelByValue(this.value2)
          },
          edit(excel_id) {
            this.$router.push({path:'/department_excel',query:{"excel_id": excel_id}})
          },
          show(excel_id){
            this.$router.push({path:'/department_excel',query:{"excel_id": excel_id,"user_id":this.user_id,"user_name":this.user_name}})
          },
          switch_pdf(){
            this.pdfs_show=true
            this.is_show_all_pdf=true
            this.show_pdfs=this.pdfs
          },
          showInfoMonth(){
            this.pdfs_show=true
            let list=[]
            let pdfs=this.pdfs
            this.is_show_all_pdf=false
            for(let i=0; i<pdfs.length; i++){

                if(pdfs[i].pdf_name.indexOf('月报表')!=-1){
                    list.push(pdfs[i])
                }
            }
            this.show_pdfs=list
          },
          showLightMonth(){
            this.pdfs_show=true
            let list=[]
            let pdfs=this.pdfs
            for(let i=0; i<pdfs.length; i++){
                if(pdfs[i].pdf_name.indexOf('光缆巡查')!=-1){
                    list.push(pdfs[i])
                }
            }
            this.show_pdfs=list
          },
          flitExcelByValue(value){
            let res=[]
            for(let i=0; i<this.list.length; i++){

                if(this.list[i].excel_name.indexOf(value)!=-1){
                    res.push(this.list[i])
                }
            }
            this.show_list=res          
          },
          showMonthPdf(){
            showLoading()
            this.pdfs_show=true
            this.is_show_all_pdf=true
            console.log(this.pdfs_show)
            this.$ajax({
                    method: 'post',
                    url: '/get_pdf_by_user_id',
                    data:{"user_id":this.user_id}
                }).
                then(res => {    
                    hideLoading()
                    this.pdfs=res.data
                    let list=res.data
                    this.show_pdfs=list
                    // let filtrated_pdfs=this.filtrateList(list)
                    // this.filtrated_pdfs=filtrated_pdfs
                    // this.show_pdfs=filtrated_pdfs
                    this.pdfs_show=true
                });             
          },
          showPdfBase64(base64){
            this.cur_show_base64=base64
            this.dialogPdfVisible=true
          },
          createExcel(){
                this.$prompt('请输入台账名称', '', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    inputPattern: /^.+$/,
                    inputErrorMessage: '不能为空'
                }).then(({ value }) => {
                    this.$router.push({path:'/create',query:{"excel_name": value}})
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '取消'
                    });       
                });
                
            },
          deleteExcel(excel_id){
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
            type: 'warning'
            }).then(() => {
                showLoading();
                this.$ajax({
                    method: 'post',
                    url: '/delete_excel__by_excel_id',
                    data:{
                        "excel_id":excel_id,
                        "user_id":this.user_id
                    }
                }).
                then(res => {    
                    hideLoading()
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                    this.getExcelList(this.user_id);
                });  
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });          
            });
          },
            //根据文件后缀 获取base64前缀 
        getBase64Type (type) {
            switch (type) {
                case 'txt': return 'data:text/plain;base64,'
                case 'doc': return 'data:application/msword;base64,'
                case 'docx': return 'data:application/vnd.openxmlformats-officedocument.wordprocessingml.document;base64,'
                case 'xls': return 'data:application/vnd.ms-excel;base64,'
                case 'xlsx': return 'data:application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;base64,'
                case 'pdf': return 'data:application/pdf;base64,'
                case 'pptx': return 'data:application/vnd.openxmlformats-officedocument.presentationml.presentation;base64,'
                case 'ppt': return 'data:application/vnd.ms-powerpoint;base64,'
                case 'png': return 'data:image/png;base64,'
                case 'jpg': return 'data:image/jpeg;base64,'
                case 'gif': return 'data:image/gif;base64,'
                case 'svg': return 'data:image/svg+xml;base64,'
                case 'ico': return 'data:image/x-icon;base64,'
                case 'bmp': return 'data:image/bmp;base64,'
            }
            },
        
        //base64转blob
            base64ToBlob(code) {
            const parts = code.split(';base64,');
            const contentType = parts[0].split(':')[1];
            const raw = window.atob(parts[1]);
            const rawLength = raw.length;
            const uInt8Array = new Uint8Array(rawLength);
            for (let i = 0; i < rawLength; ++i) {
                uInt8Array[i] = raw.charCodeAt(i);
            }
            return new Blob([uInt8Array], { type: contentType });
            },
        
        //下载
        downloadFile(fileName, content) {
            const blob = this.base64ToBlob(content); // new Blob([content]);
            if (window.navigator.msSaveOrOpenBlob) {
                navigator.msSaveBlob(blob, fileName);
            } else {
                const link = document.createElement('a');
                link.href = window.URL.createObjectURL(blob);
                link.download = fileName;
        
                //此写法兼容可火狐浏览器
                document.body.appendChild(link);
                const evt = document.createEvent("MouseEvents");
                evt.initEvent("click", false, false);
                link.dispatchEvent(evt);
                document.body.removeChild(link);
            }
            },
        
        //触发下载
        down(){
            this.downloadFile(this.fName,this.getBase64Type(this.fType)+this.fCode)
        
        },
        async getExcelList(user_id){
            this.pdfs_show=false
            console.log(this.pdfs_show)
            showLoading();
            this.$ajax({
                method: 'post',
                url: '/get_excel_list_by_user_id',
                data:{
                    "user_id":user_id,
                }
            }).
            then(res => {    
                hideLoading()
                let list=res.data
                this.show_list=list
                this.list=list
                this.flitExcelByValue(this.value2)
            //     let flit=this.filtrateList(list)
            //     this.filtrated_list=flit
            //    this.show_list=flit
            });             
          },
          filtrateList(list){
            var date1 = new Date();
            //今天时间
            var month =date1.getMonth() + 1; 
            let res=[]
            for(let i=0;i<list.length;i++){
                let d=list[i].date
                let m=d.split("-")[1]
                m=parseInt(m)
                if(m==month){
                    res.push(list[i])
                }
            }
            return res
        } 
        },
  
    }
  </script>
  
  
  <style>
    .main-page{
      width: 100%;
      height: 80vh;
      padding: 1vh;
    }
    .main-page-list{
      margin-top:1vh;
      width: 100%;
      height: 70vh;
      overflow-y: scroll;
    }
    .main-btn{
        width: 100%;
        display: flex;
        margin-top:1vh;
        margin-bottom:1vh;
    }
  </style>
  
  